<!--
 * @Descripttion: 
 * @version: 
 * @Author: weni09
 * @Date: 2021-04-21 13:47:52
 * @LastEditors: weni09
 * @LastEditTime: 2021-06-10 15:45:24
 * @FilePath: \icoder-frontend\blog\src\components\ArticleCard.vue
-->
<template>
    <el-card shadow="hover" class="art-card">
                        
						<svg class="icon icon-top" v-if="article.is_top" aria-hidden="true">
  							<use xlink:href="#icon-top"></use>
						</svg>

                        <!-- <img class="icon icon-top" v-if="article.is_top" src="@/assets/top.png"> -->
  
						<el-row type="flex" align="middle" justify="center">
						<el-col :span="6" v-if="isHasImgLink">
                            <router-link :to="{path:'/artDetail/' + article.id}" class="art-img-link">
                            <img class="art-img" :src="baseUrl + article.img_link"></router-link>
						</el-col>
						<el-col :span="isHasImgLink?18:24" class="art-text">
                        <el-row class="art-info" align="middle" type="flex">
                            <div class="user-avatar art-attribute ">
                                <el-avatar :size="25" sharp="circle" :src="article.author_avatar"></el-avatar>
                                <span style="align-self:middle"> {{ article.nickname }}</span>
                                </div>
							<div class="art-time art-attribute  v-cloak">
                                <i class="iconfont icon-calender"></i><span :title="$t('article.create_date')"> {{ article.create_date }}</span></div>
                                
                            <div class="art-public art-attribute " v-if="article.is_public">
                                <i class="iconfont icon-gongkai" :title="$t('article.public')"></i>
                            </div>
                            <div class="art-private art-attribute " v-else>
                                <i class="iconfont icon-siyou" :title="$t('article.private')"></i>
            
                            </div>
						</el-row>
						<h3><router-link :to="{path:'/artDetail/' + article.id}" tag="span" class="art-title">{{ article.title }}</router-link></h3>
		
						<el-row class="art-summary" type="flex">
								<p>{{ article.summary }}</p>
						</el-row>
                        <el-row class="art-info" align="middle" type="flex" >
                            <div class="art-catetory att-hover art-attribute" title="分类" @click="jumpCategoty()">
		                        <i class="iconfont icon-leimupinleifenleileibie2"></i> {{ article.category_name }}
                                </div>
                            <div class="art-views art-attribute">
                                <i class="iconfont icon-view"> {{ article.views }}</i>
                            </div>
                            <div class="art-comment art-attribute">
                                <i class="iconfont icon-FontAwesomecommentdotssolid"> {{ article.comment_cnt }}</i>
                            </div>
                        </el-row>
						</el-col>
						</el-row>
					</el-card>
</template>
<script>

export default ({
    inject:['reload'],
    name: "articleCard",
    data(){
        return{
           baseUrl: process.env.NODE_ENV === 'production'
											? window.location.protocol+ "//" + window.location.host + "/" 
                                            // ? ''
											:process.env.VUE_APP_BASE_URL,
        }
    },
    props:{
        article:{
            type:Object,
            default:null,
        }
    },

    computed:{
        isHasImgLink(){
            return this.article.img_link !== null && this.article.img_link !==''
        }
    },
    methods:{
     	//点击时，跳转分类路由，刷新对应组件
		jumpCategoty(){
            let url = `/articles/category/${this.article.category_slug}`
            if (url != this.$route.path){
                this.$router.push(url)
                this.reload();
            };
        },
        
    },
    created(){
        // console.log(this.baseUrl)

    }
})
</script>

<style lang="scss" scoped>
@import "../styles/ArticleCard.scss";

</style>